<template>
    <div class="preview">
        <a-button type="primary" @click="getFilesData('preview')" :disabled="isDisabled"
            :loading="loading">预览</a-button>
        <a-modal :visible="visible" width="100vw" :centered="true" :footer="null" @cancel="cancel" title="文件预览">
            <a-spin :spinning="preLoading" style="width: 100%;min-height: 40vh;">
                <iframe :src="previewUrl" width="100%" height="100vh"></iframe>
            </a-spin>
        </a-modal>
    </div>
</template>

<script>
import qs from "qs";
// import { renderAsync } from 'docx-preview';
import JSZip from 'jszip';

export default {
    name: 'Preview',
    props: {
        isDisabled: {
            type: Boolean,
        },
        formData: {
            type: Object,
        },
        type: {
            type: [String, Number]
        },
        formType: {
            type: [String, Number]
        }
    },
    data() {
        return {
            previewUrl: '',
            fileType: '',// docx
            visible: false,
            loading: false,
            preLoading: true,
        }
    },
    methods: {
        getFilesData() {
            var questUrl = this.$previewData;
            let params = {
                ...this.formData,
            };
            this.loading = true;
            this.getAxios(questUrl, params, {}, { responseType: "blob" })
                .then(async (res) => {
                    try {
                        const blob = new Blob([res], {
                            type: 'application/pdf',
                        });
                        this.previewUrl = window.URL.createObjectURL(blob)
                        this.visible = true;
                    } catch (err) {
                        console.error('文件处理失败:', err);
                        this.$message.error('文件预览失败，请重试');
                    }

                }).catch(() => {
                    this.visible = false;
                })
                .finally(() => {
                    this.loading = false;
                    this.preLoading = false;
                });
        },
        blobToArrayBuffer(blob) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = reject;
                reader.readAsArrayBuffer(blob); // 读取Blob为ArrayBuffer
            });
        },
        cancel() {
            this.visible = false;
            this.loading = false;
            this.preLoading = false;
            this.previewUrl = '';
        },
        changeFormat() {

        }
    },
    mounted() {
    },
    watch: {
        previewUrl(nVal, oVal) {
            if (!nVal) {
                this.previewUrl = '';
            }
        }
    }
}
</script>

<style lang="less" scoped>
::v-deep {
    .ant-modal-body {
        height: 100%;
        max-height: 100vh;
        min-height: 30vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0px;
    }

    .ant-modal-header {
        padding: 6px 24px;
    }

    .ant-modal-close-x {
        height: 35px;
        width: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
    }

    .ant-modal {
        padding: 0px;
    }

    .docx-wrapper {
        padding: 0px;
    }

    .file {
        background-color: #ffffff;
    }

    iframe {
        min-height: calc(100vh - 46px);
    }
}
</style>